<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1536px;height:864px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var yearlist = ['1998','2000','2002','2004','2008','2010','2012','2014','2016','2018'];
        var countryList = ['USA','China','Japan','Germany','UK','France','Italy','India'];
        var flagIcons = {
                'usa': 'usa.png',
                'chn': 'chn.png',
                'jpn': 'jpn.png',
                'deu': 'deu.png',
                'gbr': 'gbr.png',
                'fra': 'fra.png',
                'ita': 'ita.png',
                'ind': 'ind.png'                                
        };
        var option = {
            timeline:{
                axisType: 'category',
                autoPlay: true,
                playInterval: 1500,
                data: yearlist,
                label:{
                    fontSize: 18
                }
            },
            baseOption:{
                dataset:{
                    source:[
                        ['year','USA','China','Japan','Germany','UK','France','Italy','India'],
                        ['1998',9.0628,1.029,4.0325,2.239,1.6502,1.5031,0.4214,1.2701],
                        ['2000',10.2523,1.2113,4.8875,1.9431,1.6578,1.3622,0.4684,1.1438],
                        ['2002',10.9364,1.4706,4.1151,2.0686,1.7845,1.4943,0.5149,1.2707],
                        ['2004',12.2137,1.9553,4.8151,2.8092,2.4169,2.1157,0.7091,1.8032],
                        ['2006',13.8146,2.7521,4.5304,2.9922,2.7137,2.3186,0.9403,1.9479],
                        ['2008',14.7128,4.5943,5.0379,3.73,2.9227,2.9184,1.1989,2.3989],
                        ['2010',14.9921,6.0872,5.7001,3.3964,2.4752,2.6426,1.6756,2.134],
                        ['2012',16.197,8.5322,6.2032,3.5273,2.7049,2.6838,1.8276,2.0871],
                        ['2014',17.5217,10.4385,4.8504,3.8839,3.0638,2.8522,2.0391,2.1591],
                        ['2016',18.7072,11.1379,4.9267,3.4668,2.6943,2.4713,2.2904,1.8756],
                        ['2018',20.5443,13.6082,4.9713,3.9476,2.8553,2.7775,2.7187,2.0839]

                    ]
                },

                title: {
                    text: '1998年世界各国GDP (万亿美元)',
                    left: 'center',
                    textStyle:{
                        fontSize:24
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                legend: {                
                },               
                grid: {
                    left: '10%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: [
                    {
                    type:'category',
                    data: countryList,
                    axisPointer: {
                    type: 'shadow'
                    },
                    
                    axisLabel: {
                        formatter: function (value) {
                            return '{' + value + '| }\n{value|' + value + '}';
                        },
                        margin: 20,
                        rich: {
                            value: {
                                lineHeight: 30,
                                fontSize: 18,
                                align: 'center'
                            },
                            USA: {
                                height: 40,
                                align: 'center',
                                backgroundColor: {
                                    image: flagIcons.usa
                                }
                            },
                            China: {
                                height: 40,
                                align: 'center',
                                backgroundColor: {
                                    image: flagIcons.chn
                                }
                            },
                            Japan: {
                                height: 40,
                                align: 'center',
                                backgroundColor: {
                                    image: flagIcons.jpn
                                }
                            },
                            Germany: {
                                height: 40,
                                align: 'center',
                                backgroundColor: {
                                    image: flagIcons.deu
                                }
                            },
                            UK: {
                                height: 40,
                                align: 'center',
                                backgroundColor: {
                                    image: flagIcons.gbr
                                }
                            },
                            France: {
                                height: 40,
                                align: 'center',
                                backgroundColor: {
                                    image: flagIcons.fra
                                }
                            },
                            Italy: {
                                height: 40,
                                align: 'center',
                                backgroundColor: {
                                    image: flagIcons.ita
                                }
                            },
                            India: {
                                height: 40,
                                align: 'center',
                                backgroundColor: {
                                    image: flagIcons.ind
                                }
                            },
                        }
                    } 
                    
                    },
                ],
                yAxis:[ 
                    {
                    name:'GDP (万亿美元)',
                    type:'value',
                    nameTextStyle:{
                        fontSize:18
                    },
                    axisLabel:{
                        fontSize:18
                    }
                    },                
                ],
                series: [                
                    {
                    //name: 'GDP',
                    type: 'bar',
                    seriesLayoutBy: 'row',
                    encode:{
                        x:'year',
                        y:'1998'
                    }
                    },
                ]
            },
            options:[]
        };

        for (var n = 0; n<yearlist.length; n++){
            option.options.push({
                title:{
                    show:true,
                    text:yearlist[n]+'年世界各国GDP (万亿美元)',
                    left: 'center',
                    textStyle:{
                        fontSize:24
                    }
                },
                series:[
                    {
                    type: 'bar',
                    seriesLayoutBy: 'row',
                    encode:{
                        x:'year',
                        y:yearlist[n]
                    }
                    },
                ]
            });
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
